<template>
	<el-dialog
		:title="roleTitle"
		:visible.sync="roleVisible"
		width="50%"
		:before-close="closeDiaglog"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		top="5vh"
	>
		<el-form :model="form" :rules="rules" ref="form" label-width="80px">
			<el-form-item label="所属角色" prop="roleId" required>
				<el-select v-model="form.roleId" placeholder="请选择所属角色" clearable filterable style="width: 100%">
					<el-option
						v-for="(item, k) in roleInfoOptions"
						:key="k"
						:label="item.roleName"
						:disabled="checkDisabled(item.pkId)"
						:value="item.pkId"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="字段筛选">
				<el-input
					class="filter-input"
					placeholder="请输入字段名进行过滤"
					v-model.trim="filterText"
					clearable
					:debounce="300"
					style="width: 100%"
				>
				</el-input>
			</el-form-item>

			<el-form-item label=" ">
				<div>
					<el-tabs
						v-model="activeName"
						@tab-click="changeTab"
						v-loading="getDataLoading"
						element-loading-text="正在加载数据，请耐心等待......"
						element-loading-spinner="el-icon-loading"
						element-loading-background="rgba(0, 0, 0, 0.8)"
					>
						<el-tab-pane label="可编辑" name="edit">
							<el-tree
								:data="treeData"
								show-checkbox
								node-key="fieldId"
								:expand-on-click-node="false"
								:props="defaultProps"
								:key="treeKey1"
								ref="editTree"
								@check-change="changeTree($event, 'edit')"
								:filter-node-method="filterNode"
							>
								<span class="custom-tree-node" slot-scope="{ node }">
									<el-tooltip class="item" effect="dark" :content="node.label" placement="top-start" :open-delay="300">
										<span>{{ node.label }}</span>
									</el-tooltip>
								</span>
							</el-tree>
						</el-tab-pane>

						<el-tab-pane label="可查看" name="look">
							<el-tree
								:data="treeData"
								show-checkbox
								node-key="fieldId"
								:expand-on-click-node="false"
								:props="defaultProps"
								:key="treeKey2"
								ref="lookTree"
								@check-change="changeTree($event, 'look')"
								:filter-node-method="filterNode"
							>
								<span class="custom-tree-node" slot-scope="{ node }">
									<el-tooltip class="item" effect="dark" :content="node.label" placement="top-start" :open-delay="300">
										<span>{{ node.label }}</span>
									</el-tooltip>
								</span>
							</el-tree>
						</el-tab-pane>
					</el-tabs>
				</div>
			</el-form-item>
		</el-form>

		<span slot="footer" class="dialog-footer">
			<el-button size="small" @click="closeDiaglog">取 消</el-button>
			<el-button size="small" type="primary" @click="submitForm('form')" :disabled="btnLoading" :loading="btnLoading">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
import { createNewUser, modifyChecked } from '@/api/productApi/rolesSetting'
import { getOriginalData } from '@/api/productApi/fieldManagement'
import { processingRawData } from '../../treeData'
export default {
	props: {
		roleVisible: {
			type: Boolean,
			default: false
		},
		roleTitle: {
			type: String,
			default: ''
		},
		selectedRow: {
			type: Object,
			default: () => {}
		},
		roleInfoOptions: {
			type: Array,
			default: () => []
		},
		tableData: {
			type: Array,
			default: () => []
		}
	},

	watch: {
		roleVisible: {
			handler(a) {
				if (a) {
					const obj = JSON.parse(JSON.stringify(this.selectedRow))
					if (!obj.viewIdList) {
						obj.viewIdList = []
					}
					if (!obj.editIdList) {
						obj.editIdList = []
					}
					this.editId = obj.roleId
					this.form = obj
					if (this.roleTitle === '配置字段') {
						this.changeTab()
					}
				}
			},
			immediate: true
		},
		filterText(val) {
			this.$refs.editTree && this.$refs.editTree.filter(val)
			this.$refs.lookTree && this.$refs.lookTree.filter(val)
		}
	},

	data() {
		return {
			form: {},
			rules: {
				roleId: [{ required: true, message: '请选择所属角色', trigger: 'change' }]
			},
			treeData: [],
			activeName: 'edit',
			defaultProps: {
				children: 'childNodeList',
				label: 'fieldName'
			},
			filterText: '',
			getDataLoading: false,
			btnLoading: false,
			editId: '',
			treeKey1: 1,
			treeKey2: 1
		}
	},

	mounted() {
		this.getConfigTrees()
	},

	methods: {
		filterNode(value, data) {
			if (!value) return true
			return data.fieldName.indexOf(value) !== -1
		},

		checkDisabled(id) {
			return this.tableData.some(item => item.roleId === id && item.roleId !== this.editId)
		},

		changeTree(event, type) {
			if (type === 'edit') {
				this.form.editIdList = this.$refs.editTree.getCheckedKeys()
			} else {
				this.form.viewIdList = this.$refs.lookTree.getCheckedKeys()
			}
		},

		closeDiaglog() {
			this.treeKey1 += 1
			this.treeKey2 += 1
			this.$emit('update:roleVisible', false)
			this.form = {}
			this.activeName = 'edit'
			this.filterText = ''
			this.$nextTick(() => {
				this.$refs.form.clearValidate()
				this.$refs.editTree && this.$refs.editTree.setCheckedKeys([])
				this.$refs.lookTree && this.$refs.lookTree.setCheckedKeys([])
			})
		},

		// 提交表单
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.btnLoading = true
					if (this.roleTitle === '新增角色') {
						createNewUser(this.form)
							.then(res => {
								if (res.msgCode === 'Y') {
									this.$message({ showClose: true, message: res.msgDesc, type: 'success' })
									this.closeDiaglog()
									this.$emit('updateList')
								}
							})
							.finally(() => {
								this.btnLoading = false
							})
					} else if (this.roleTitle === '配置字段') {
						modifyChecked(this.form)
							.then(res => {
								if (res.msgCode === 'Y') {
									this.$message({ showClose: true, message: res.msgDesc, type: 'success' })
									this.closeDiaglog()
									this.$emit('updateList')
								}
							})
							.finally(() => {
								this.btnLoading = false
							})
					}
				}
			})
		},

		// 获取数据
		getConfigTrees() {
			this.getDataLoading = true
			getOriginalData()
				.then(res => {
					if (res.msgCode === 'Y') {
						this.treeData = processingRawData(res.data.body)
					}
				})
				.finally(() => {
					setTimeout(() => {
						this.getDataLoading = false
					})
				})
		},

		changeTab() {
			if (this.activeName === 'edit') {
				this.$nextTick(() => {
					this.$refs.editTree && this.$refs.editTree.setCheckedKeys(this.form.editIdList)
				})
			} else {
				this.$nextTick(() => {
					this.$refs.lookTree && this.$refs.lookTree.setCheckedKeys(this.form.viewIdList)
				})
			}
		}
	}
}
</script>
<style lang="scss" scoped>
</style>
